<template>
  <div class="shop-info" v-if="Object.keys(shop).length !==0">
    <div class="shop-name">
      <img :src="shop.logo" alt="">
      <span>{{shop.name}}</span>
    </div>
    <div class="shop-detail">
      <div class="left">
        <div>
          <p>{{shop.sells | sellFilter}}</p>
          <p>总销量</p>
        </div>
        <div>
          <p>{{shop.goods}}</p>
          <p>全部宝贝</p>
        </div>
      </div>
      <div class="right">
        <div>
          <p v-for="item in shop.score">
            <span>{{item.name}}</span>
            <span :class="{green: !item.isBetter, red: item.isBetter}">
              <span class="scoreText"><span v-if="item.isBetter">高</span><span v-else>低</span></span>
              <span class="score">{{item.score}}</span>
            </span>
          </p>
        </div>
      </div>
    </div>
    <div class="button">
      <a href="javascript:">进店逛逛</a>
    </div>
  </div>
</template>

<script>
  export default {
    name: "DetailShopInfo",
    props: {
      shop: {
        type: Object,
        default(){
          return {}
        }
      }
    },
    filters: {
      sellFilter(value){
        if(value < 10000) return value
        return (value / 10000).toFixed(1) + '万'
      }
    }
  }
</script>

<style scoped>
.shop-info{
  padding: 16px 8px 20px;
  color: #333;
  border-bottom: 6px solid #eee;
}
.shop-name img{
  width: 42px;
  border-radius: 50%;
  border: 1px solid #eee;
  margin-right: 10px;
  vertical-align: middle;
}
.shop-detail{
  display: flex;
  font-size: 12px;
  line-height: 22px;
  align-items: center;
  padding: 16px 0 12px;
}
.shop-detail>div{
  flex: 1;
}
.shop-detail .left{
  display: flex;
}
.left div p:first-child{
  font-size: 16px;
}
.shop-detail>div>div{
  flex: 1;
  text-align: center;
}
.left>div:last-child{
  height: fit-content;
  border-right: 1px solid #eee;
}
.shop-detail .right>div{
  width: fit-content;
  margin: 0 auto;
  text-align: left;
}
.score{
  margin: 0 6px;
}
.green{
  color: green;
}
.red{
  color: red;
}
.scoreText{
  float: right;
  color: #fff;
}
.green .scoreText span{
  background: green;
}
.red .scoreText span{
  background: red;
}
.button a{
  display: block;
  background: #f4f4fc;
  font-size: 12px;
  width: 120px;
  line-height: 24px;
  text-align: center;
  border-radius: 5px;
  margin: 0  auto;
}
</style>